<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#kong{
				height:1024px;
				width:100%;
			}
			#zg{
				width:100%;
				height:1024px;
				background:#eee;
				position:absolute;
				top:0;
				left:0;
				display:none;
				opacity:.4;
			}
			#top{
				width:100%;
				height:50px;
			}
			#nav{
				height:50px;
				background:green;
				width:100%;
				color:#000;
				font-size:20px;
			}
			#nav span{
				line-height:50px;
			}
			#nav a{
				text-decoration: none;
				color:#000;
			}
			#dl{
				margin:0 30px;
			}
			#move{
				width:100px;
				height:50px;
				border:1px solid #000;
				line-height:50px;
				text-align:center;
				background:#eee;
			}
			#box{
				border:1px solid #000;
				width:400px;
				position:absolute;
				top:50%;
				left:40%;	
				display:none;
				z-index:99;
			}
			#nav2{
				width:400px;
				height:40px;
				line-height:40px;
				background:#fff;
				border-top:1px solid #000;
			}
			#nav2 span{
				display:block;
				float:left;
				width:80px;
				text-align:center;
			}
			#nav2 .on{background: skyblue;}
			#nav2 a{
				float:right;
				margin-right:20px;
			}
			form{
				width:400px;
				height:200px;
				background:skyblue;
				vertical-align:middle;	
			}
			.content{
				display:none;
				width:400px;
				height:200px;
			}
		</style>
	</head>
	<body>
		<div id="zg"></div>
		<div id="top"></div>
		<div id="nav">
			<span>Nav</span>
			<a href="javascript:;" id="dl">请先注册</a>
		</div>
		
		<div id="box">
			<div id=move>拖拽区</div>
			<div id="nav2">
				<span class="on">注册</span>
				<span>登录</span>
				<a href="javascript:;" id="gb">关闭</a>
			</div>
			<form action="success.html" class="content" onsubmit="return checkForm();" style="display:block;" >		
				<br />
				<br /><br />
				邮箱名：<input type="text" value ="" id = "txt" />
				<span id="s1"></span><br />
				密码：<input type="password"  value ="" id="pwd"/>
				<span id="s2"></span>
				<br />
				<input type="submit" value="注册" />
				<input type="button" value="重置" />
			</form>
					
			<form action="" class="content">	
				<br />
				<br /><br />
				邮箱名：<input type="text" value ="" id = "txt2" />
				<span id="s3"></span><br />
				密码：<input type="password"  value ="" id="pwd2"/>
				<span id="s4"></span>
				<br />
				<input type="submit" value="登录"/>
				<input type="button" value="重置" />
			</form>
		</div>
		
		<div id="kong"></div>
	</body>
</html>
<script>
	function $(id){
		return document.getElementById(id);
	}
	
	//吸顶效果
	 var nav = $("nav");
	  window.onscroll = function(){
	 	var height = 50 ;
	 	//当页面滚走的距离 大于 50 时，固定 导航栏  
	 	
	 	//获取页面滚走的距离
	 	var sTop = document.body.scrollTop || document.documentElement.scrollTop;
	 	if( sTop > height ){
	 		nav.style.position = "fixed";
	 		nav.style.top = "0";
	 	}else{
	 		nav.style.position = "";
	 	}
	 }
	  
	//点击登录显示 和 关闭   
	var dBtn = $("dl");
	var gBtn = $("gb");
	
	dBtn.onclick = function(){
		$("box").style.display = "block";
		$("zg").style.display = "block";
	}
	gBtn.onclick = function(){
		$("box").style.display = "none";
		$("zg").style.display = "none";
	}
	
	//拖拽
	$("move").onmousedown = function(e){
  		var e = e||event;
      	var target = e.target || e.srcElement;
  		var disx = e.offsetX;
  		var disy = e.offsetY;
      if( target == $("move") ){
			document.onmousemove = function(e){
				var e = e||event;
				window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				var x = e.clientX - disx;
				var y = e.clientY - disy;
				var maxX = window.innerWidth - 400;
				var maxY = window.innerHeight - 254;
				//边界处理
				if( x < 0 ){//左边
					x = 0;
				}else if( x > maxX ){ //右边
					x = maxX;
				}
				
				if( y < 0 ){ //上边
					y = 0;
				}else if( y > maxY ){ //下边界
					y = maxY;
				}
				  	$("box").style.left = x + "px";
				 	$("box").style.top = y + "px";
			}
         }
    }
	$("move").onmouseup = function(){
  		document.onmousemove = null;
  	}
	
	//选项卡
	var aList = document.getElementsByTagName("span"); 
	var conList = document.getElementsByClassName("content"); 
	//排他
	for(var i = 0 ; i < aList.length ; i++){
		aList[i].index = i;//动态为  a标签加一个下标  
		
		aList[i].onmouseover = function(){
			for( var j = 0 ; j < aList.length ; j++  ){
				
				aList[j].className = "";
				//conList[j].style.display = "none";
			}
			
			this.className = "on";
			//conList[ this.index ].style.display = "block";
		}
		
	}
	
	//表单验证功能   ：  所有的表单项都符合要求，返回true，只要有一个不符合要求，就返回false
	var flagName = null;
	$("txt").onblur = function() {
		//用户名
		var reg = /^\w+\@\w+(\.\w+)$/;
		var str = $("txt").value;
		if(reg.test(str)) {
			$("s1").innerHTML = "可用"
			flagName = true;
		} else{
			$("s1").innerHTML = "不正确的格式"
			flagName = false;
		}
	}
	var flagPwd = null;
	$("pwd").onblur = function() {
		//密码
		var reg = /^.{6,}$/;
		var str = $("pwd").value;
		if(reg.test(str)) {
			$("s2").innerHTML = "合格";
			flagPwd = true;
		} else {
			$("s2").innerHTML = "至少输入6位";
			flagPwd = false;
		}
	}
	
	//表单验证功能   ：  所有的表单项都符合要求，返回true，只要有一个不符合要求，就返回false
	function checkForm() {
		if( flagName && flagPwd ) {
			return true;
		} else {
			return false;
		}
	}
</script>